<template>
    <el-form ref="form" :model="form" label-width="80px">
        <div style="width: 100px">产品详情
            <hr style="margin-left:30px;margin-top:20px;width: 1185px">       <!--给整条水平分割线搞美观一点-->
        </div>
        <div style="margin-top: 40px">
            <el-form-item label="类型">
                <el-select :disabled="viewFlag" style="margin-left: -780px" v-model="form[0].propertyValueProduct.productCategory.categoryName">
                    <el-option v-for="(cate,index) in category" v-model="cate.categoryName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group :disabled="viewFlag" style="margin-left: -740px" v-model="form[0].propertyValueProduct.productIsEnabled">
                    <el-radio label="销售中"></el-radio>
                    <el-radio label="停售中"></el-radio>
                    <el-radio label="促销中"></el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">基本信息
        </div>

        <div style="margin-top: 40px">
            <el-form-item style="float: left" label="编号">
                <span style="margin-left: 90px">{{form[0].propertyValueProduct.productId}}</span>
            </el-form-item>
            <el-form-item style="float: left;margin-left: 200px" label="上架日期">
                <el-col :span="8">
                    <el-date-picker :disabled="viewFlag" type="date" placeholder="选择日期"
                                    v-model="form[0].propertyValueProduct.productCreateDate"
                                    style="width: 100%;"></el-date-picker>
                </el-col>

                <el-col class="line" :span="2">---</el-col>

                <el-col :span="8">
                    <el-time-picker :disabled="viewFlag" placeholder="选择时间" v-model="form[0].propertyValueProduct.productCreateDate"
                                    style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>

            <el-form-item style="width: 600px;" label="名称">
                <el-input :disabled="viewFlag" v-model="form[0].propertyValueProduct.productName"></el-input>
            </el-form-item>

            <el-form-item style="float: left" label="标题">
                <el-input :disabled="viewFlag" v-model="form[0].propertyValueProduct.productTitle"></el-input>
            </el-form-item>
            <el-form-item  style="float: left;margin-left: 65px" label="原价">
                <el-input :disabled="viewFlag" v-model="form[0].propertyValueProduct.productPrice"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 750px" label="促销价">
                <el-input :disabled="viewFlag" style="float: left;width: 206px"
                          v-model="form[0].propertyValueProduct.productSalePrice"></el-input>
            </el-form-item>
        </div>
        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">概述图片
        </div>
        <el-image v-for="(image,index) in imageRoughUrl"
                style="width: 120px; height: 120px; margin-left: 20px;margin-top: 40px;"
                src="require('@/assets/img/productPictures/'+image.productImageSrc)"
                fit="contain"><!--把图片导入后把src换为 :src就好了-->
        </el-image>

        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">详情图片
        </div>
        <el-image  v-for="(image,index) in imageDetailUrl"
                style="width: 120px; height: 120px; margin-left: 20px;margin-top: 40px"
                src="require('@/assets/img/productPictures/'+image.productImageSrc)"
                fit="contain"><!--把图片导入后把src换为 :src就好了-->

        </el-image>

        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">属性值
        </div>

        <div style="margin-top: 40px">
            <div v-for="(propertyValue,index) in form">
                <el-form-item style="float: left;width: 400px">
                    <span slot="label">{{propertyValue.propertyValueProperty.propertyName}}</span>
                    <!--这里用于自定义el-form-item的label内容-->
                    <el-input :disabled="viewFlag" v-model="propertyValue.propertyvalueValue"></el-input>
                </el-form-item>
            </div>
        </div>
        <div style="margin-left: -200px;margin-top: 300px" v-if="!viewFlag">
            <el-button  type="primary" @click="onSubmit()">保存</el-button>
            <el-button @click="cancel()">取消</el-button>
        </div>
    </el-form>
</template>

<script>
    export default {
        name: 'ProductDetail',
        data() {
            return {
                productId: null,    //产品的id
                viewFlag:false,    //如果是查看就禁用
                category: [],   //已经有的种类集合
                imageRoughUrl: [],//概述图片集合
                imageDetailUrl:[],//详情图片集合

                form: [{           //根据菜品查出来的是一个数组，每个数组都有以下成员
                    propertyvalueValue: '',//属性值
                    propertyValueProperty: {  //传来的信息里会有一个property类，用来识别该属性值是属于哪个属性
                        propertyCategory: {    //property类里有一个category类，用来识别该属性归于哪个种类
                        },
                    },
                    propertyValueProduct: {    //传来的信息里会有一个product类，用来识别属于哪个产品
                        productCategory: {     //product类里有个category类，这里我就用到下面这个，方便修改产品值时的传值
                        }
                    }
                }]
            }
        },
        methods: {
            onSubmit() {
                //记得修复属性框不能编辑的bug，还要记得将单选框的销售状态的文字内容改为数字。还有保存提交功能以及取消功能--------------
                this.$confirm("想清楚再确认修改", "修改提示", {
                    confirmButtonText: '确认修改',
                    cancelButtonText: '手抖勿介',
                    type: 'danger'
                }).then(() => { //确认修改
                    console.log("传出去的数据",this.form[0].propertyValueProduct)
                    for (let i = 0; i < this.form.length; i++) {
                        let stop = 0  //循环终止变量
                        //修改属性值
                        this.$axios.put(`/api/propertyValue/${this.form[i].propertyvalueValue}/${this.form[i].propertyvalueId}`)
                            .then(res => {
                                if (res.data == 0) {
                                    console.log("修改属性值失败", res)
                                    this.$message({   //弹出错误框
                                        showClose: true,
                                        type: "error",
                                        message: "修改属性值错误",
                                        center: true
                                    })
                                    stop = 1   //变量改变
                                }
                            })

                        if (stop == 1) {
                            break;   //跳出循环
                        }
                    }
                    //修改产品值
                    switch (this.form[0].propertyValueProduct.productIsEnabled) {   //将产品销售状态从文字改为数字
                        case '销售中' :
                            this.form[0].propertyValueProduct.productIsEnabled = 0
                            break;
                        case '已停售' :
                            this.form[0].propertyValueProduct.productIsEnabled = 1
                            break;
                        case '促销中' :
                            this.form[0].propertyValueProduct.productIsEnabled = 2
                            break;
                    }
                    this.$axios({
                        url: '/api/product',
                        method: 'put',
                        data: {
                            ...this.form[0].propertyValueProduct
                        }
                    }).then(res => {
                        console.log("修改产品成功", res)
                        if (res.data == 1) {          //只有data返回1时成功
                            this.$message({ //成功修改提示
                                showClose: true,  //设置手动关闭
                                center: true,//内容居中
                                message: '更新产品值成功',
                                type: 'success'
                            })
                            this.getProductDetail() //保存完后进行刷新，重新加载修改后的数据
                        } else {
                            this.$message({   //弹出错误框
                                showClose: true,
                                type: "error",
                                message: "更新失败！",
                                center: true //内容居中
                            });
                        }
                    }).catch(res => {
                        this.$message({   //弹出错误框
                            showClose: true,
                            type: "error",
                            message: "更新产品值失败败败败！",
                            center: true //内容居中
                        });
                    })
                })
            },
            cancel() {
                this.getProductDetail()        //重新加载原来的数据
            },
            getProductDetail() {       //渲染页面时先获取值
                this.$axios.get("/api/category").then(res => { //将已有种类集合拿到
                    this.category = res.data   //赋值给category[]
                })
                this.productId = this.$route.params.productId;   //从产品表格过来的，拿到产品的id
                this.viewFlag = this.$route.params.flag == 'view' ? true :false;
                this.$axios.get(`/api/propertyValue/${this.productId}`).then(res => { //获取该产品的所有属性值
                    console.log("该产品详细信息", res.data)
                    this.form = res.data                 //属性值集合赋值给form[]
                    switch (this.form[0].propertyValueProduct.productIsEnabled) {   //只设置一个就可以了，我只用到一个
                        case 0 :
                            this.form[0].propertyValueProduct.productIsEnabled = '销售中'
                            break;
                        case 1 :
                            this.form[0].propertyValueProduct.productIsEnabled = '已停售'
                            break;
                        case 2 :
                            this.form[0].propertyValueProduct.productIsEnabled = '促销中'
                            break;
                    }
                }).catch(res => { })//服务器出错

                    this.$axios.get(`/api/productImage/${this.productId}/0`).then(res => {
                        this.imageRoughUrl = res.data    //获取概述图片集合
                        console.log("概述图片集合",this.imageRoughUrl)
                    })
                    this.$axios.get(`/api/productImage/${this.productId}/1`).then(res =>{
                        this.imageDetailUrl = res.data   //获取详细图片集合
                        console.log("详细图片集合",this.imageDetailUrl)
                    })
            },

        },
        created() {
            this.getProductDetail()
        }
    }
</script>

